<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chart</title>
    <link rel="stylesheet" href="bootstrap-3/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/base.css" type="text/css"/>
    <link rel="stylesheet" href="css/chart.css" type="text/css"/>
    <link rel="stylesheet" href="Font-Awesome-3/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <script src="jq/jquery.min.js"></script>
    <script src="bootstrap-3/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="js/echarts.simple.min.js"></script>
    <script src="jq/chart.js"></script>
</head>
<body>
<!--头部 start-->
<div class="container-fluid">
    <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <i class="glyphicon glyphicon-heart-empty"></i>
                <span>Flatty</span>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 row">
            <ul class="nav navbar-nav">
                <li><a href="#" class="glyphicon glyphicon-align-justify"></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form class="navbar-form navbar-left " role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <i class="glyphicon glyphicon-search"></i>
                        </div>
                    </form>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle glyphicon glyphicon-adjust" data-toggle="dropdown"></a>
                    <ul class="dropdown-menu color">
                        <li>
                            <p>Body color</p>
                        </li>
                        <li>
                            <a href="#">
                                <span>Light (default)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>Dark</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <p>Contrast color</p>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user red"></i>
                                <span>Red (default)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user blue"></i>
                                <span>Blue</span>
                            </a>
                        </li>
                        <li class="icon-change">
                            <a href="#">
                                <i class="glyphicon glyphicon-user orange"></i>
                                <span>Orange</span>
                            </a>
                        </li>
                        <li class="icon-change">
                            <a href="#">
                                <i class="glyphicon glyphicon-user purple"></i>
                                <span>Purple</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user green"></i>
                                <span>Green</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>John Doe signed up</span>
                                <span>just now</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>John Doe signed up</span>
                                <span>just now</span>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">ALL notifications</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="img/avatar.jpg">
                        <span>Mila Kunis</span>
                        <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i><span>Profile</span></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-cog"></i><span>Settings</span></a></li>
                        <li class="divider"></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </nav>
</div>
<!--头部 end-->
<main>
    <div class="content-left">
        <ul class="left-list">
            <li class="list-item">
                <a href="index.html">
                    <i class="icon-dashboard"></i>
                    <span class="list-item-font">Dashboard</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-edit"></i>
                    <span class="list-item-font">Forms</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form styles and features</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Form components</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Validations.html">
                            <i class="icon-caret-right"></i>
                            <span>Validations</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Wizard.html">
                            <i class="icon-caret-right"></i>
                            <span>Wizard</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-tint"></i>
                    <span class="list-item-font">UI Elements & Widgets</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>UI Elements</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Widgets.html">
                            <i class="icon-caret-right"></i>
                            <span>Widgets</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="buttons-and-icon.html">
                    <i class="icon-star"></i>
                    <span class="list-item-font">Buttons & Icons</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cogs"></i>
                    <span class="list-item-font">Components</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="chart.html">
                            <i class="icon-bar-chart"></i>
                            <span>Charts</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-envelope"></i>
                            <span>Address book</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-comments"></i>
                            <span>Chats</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-pencil"></i>
                            <span>In-place editing</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-list-ul"></i>
                            <span>File trees</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Fileupload.html">
                            <i class="icon-file"></i>
                            <span>Fileupload</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="Todo-list.html">
                            <i class="icon-list-alt"></i>
                            <span>Todo list</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="WYSIWYG.html">
                            <i class="icon-paste"></i>
                            <span>WYSIWYG</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="Tables.html">
                    <i class="icon-table"></i>
                    <span class="list-item-font">Tables</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-th"></i>
                    <span class="list-item-font">Grid</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-font"></i>
                    <span class="list-item-font">Typography</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-calendar"></i>
                    <span class="list-item-font">Calendar</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-book"></i>
                    <span class="list-item-font">Example pages</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-money"></i>
                            <span>Invoice</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-time"></i>
                            <span>Timeline</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-table"></i>
                            <span>Pricing tables</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-user"></i>
                            <span>User profile</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-question-sign"></i>
                            <span>404 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-cogs"></i>
                            <span>500 Error</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-signin"></i>
                            <span>Sign in</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-bullhorn"></i>
                            <span>FAQ</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-inbox"></i>
                            <span>Orders</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-search"></i>
                            <span>Search results</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-circle-blank"></i>
                            <span>Blank page</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-cog"></i>
                    <span class="list-item-font">Layouts</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Closed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed header</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation</span>
                        </a>
                    </li>
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span>Fixed navigation & header</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-mail-reply"></i>
                    <span class="list-item-font">Email templates</span>
                </a>
            </li>
            <li class="list-item">
                <a href="#">
                    <i class="icon-folder-open-alt"></i>
                    <span class="list-item-font">Four level dropdown</span>
                    <i class="icon-angle-down angle-down"></i>
                </a>
                <ul class="left-list-little">
                    <li class="list-item-little">
                        <a href="#">
                            <i class="icon-caret-right"></i>
                            <span class="list-item-font">Second level</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="list-item"></li>
        </ul>
    </div>
    <div class="content">
        <div class="content-title">
            <div class="subtitle col-sm-6">
                <span class="glyphicon glyphicon-tint"></span>
                <span>Chart</span>
            </div>
            <div class="link col-sm-6">
                <a class="glyphicon glyphicon-stats"></a>
                <span>Components ></span>
                <span>charts</span>
            </div>
        </div>
        <div class="content-center">
            <!--<div>-->
                <!--&lt;!&ndash; Nav tabs &ndash;&gt;-->
                <!--<ul class="nav nav-tabs" role="tablist">-->
                    <!--<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Basic</a></li>-->
                    <!--<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Realtime</a></li>-->
                    <!--<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Bar chart & Pie chart</a></li>-->
                    <!--<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Other</a></li>-->
                <!--</ul>-->
                <!--&lt;!&ndash; Tab panes &ndash;&gt;-->
                <!--<div class="tab-content">-->
                    <!--<div role="tabpanel" class="tab-pane active" id="home">Basic 基本的</div>-->
                    <!--<div role="tabpanel" class="tab-pane" id="profile">Realtime 实时的</div>-->
                    <!--<div role="tabpanel" class="tab-pane" id="messages">Bar chart 条形图 & Pie chart 饼图</div>-->
                    <!--<div role="tabpanel" class="tab-pane" id="settings">Other 其他</div>-->
                <!--</div>-->

            <!--</div>-->
            <div class="chart basic-chart">
                <div class="title">
                    <div class="subtitle">Basic</div>
                    <div class="icon">
                        <span class="glyphicon glyphicon-remove basic-chart-wrong"></span>
                        <span class="glyphicon glyphicon-chevron-up basic-chart-right"></span>
                    </div>
                </div>
                <div id="chart-one"></div>
            </div>
             <div class="chart real-chart">
                 <div class="title">
                     <div class="subtitle">Realtime</div>
                     <div class="icon">
                          <span class="glyphicon glyphicon-remove real-chart-wrong"></span>
                          <span class="glyphicon glyphicon-chevron-up real-chart-right"></span>
                      </div>
                 </div>
                 <div id="chart-two"></div>
             </div>
            <div class="chart avg-chart row">
                <div class="bar-chart col-md-6">
                    <div class="title">
                        <div class="subtitle">Bar chart</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove bar-chart-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up bar-chart-right"></span>
                        </div>
                    </div>
                    <div id="chart-three" style=" height:300px;border: 1px solid #dddddd;background: #ddd;"></div>
                </div>
                <script>
                    var dom = document.getElementById("chart-three");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    app.title = '坐标轴刻度与标签对齐';

                    option = {
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'直接访问',
                                type:'bar',
                                barWidth: '60%',
                                data:[10, 52, 200, 334, 390, 330, 220]
                            }
                        ]
                    };

                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                </script>
                <div class="pie-chart col-md-6">
                    <div class="title">
                        <div class="subtitle">Pie chart</div>
                        <div class="icon">
                            <span class="glyphicon glyphicon-remove pie-chart-wrong"></span>
                            <span class="glyphicon glyphicon-chevron-up pie-chart-right"></span>
                        </div>
                    </div>
                    <div id="chart-four" style=" height:300px;border: 1px solid #dddddd;background: #ddd;"></div>
                </div>
                <script type="text/javascript">
                    var dom = document.getElementById("chart-four");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    var data = genData(50);

                    option = {
                        title : {
                            text: '同名数量统计',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                            data: data.legendData,

                            selected: data.selected
                        },
                        series : [
                            {
                                name: '姓名',
                                type: 'pie',
                                radius : '55%',
                                center: ['40%', '50%'],
                                data: data.seriesData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    function genData(count) {
                        var nameList = [
                            '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
                        ];
                        var legendData = [];
                        var seriesData = [];
                        var selected = {};
                        for (var i = 0; i < 50; i++) {
                            name = Math.random() > 0.65
                                ? makeWord(4, 1) + '·' + makeWord(3, 0)
                                : makeWord(2, 1);
                            legendData.push(name);
                            seriesData.push({
                                name: name,
                                value: Math.round(Math.random() * 100000)
                            });
                            selected[name] = i < 6;
                        }

                        return {
                            legendData: legendData,
                            seriesData: seriesData,
                            selected: selected
                        };

                        function makeWord(max, min) {
                            var nameLen = Math.ceil(Math.random() * max + min);
                            var name = [];
                            for (var i = 0; i < nameLen; i++) {
                                name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
                            }
                            return name.join('');
                        }
                    }
                    ;
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                </script>
            </div>
            <div class="chart lines">
                <div class="title">
                    <div class="subtitle">Sparklines</div>
                    <div class="icon">
                        <span class="glyphicon glyphicon-remove lines-wrong"></span>
                        <span class="glyphicon glyphicon-chevron-up lines-right"></span>
                    </div>
                </div>
                <div class="container row"  id="container">
                    <div id="container1" class="col-md-6" style=" height:300px;border: 1px solid #dddddd;"></div>
                    <div id="container2" class="col-md-5" style=" height:300px;border: 1px solid #dddddd;background: #ddd;"></div>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>